import React from 'react';
import {View, Text, StyleSheet, TextInput, Switch} from 'react-native';
import {Button, Card} from 'react-native-elements';
import {getWorkstation, submitSetUp} from '../../api';
import RNPickerSelect from 'react-native-picker-select';
// import {connect} from 'react-redux';
// import action from '../../store/actions/alarmOverview';
import PublicHead from '../publicComponents/PublicHead';
import FontAwesome from 'react-native-vector-icons/FontAwesome';


/**
 * 设置
 */
class SetUp extends React.Component {
  state = {
    workstation: [],
    code: null,
    set_output: 1,
    is_automatic: 0,
    loading: false,
  };

  componentDidMount(): void {
    getWorkstation()
      .then(res => {
        console.log(res);
        let workstation = res.data.map(item => {
          let value = Number(item.code);
          return {
            label: item.name,
            value,
          };
        });
        this.setState({workstation});
      })
      .catch(err => {
        console.log(err);
      });
  }

  /**
   * 改变型号编码
   * @param value
   */
  workstationSelect = code => {
    console.log(code);
    this.setState({code});
  };
  /**
   * 设定产量
   * @param value
   */
  onChangeText = set_output => {
    set_output = Number(set_output);
    this.setState({
      set_output,
    });
  };
  /**
   * 提交参数设置
   */
  submit = () => {
    this.setState({
      loading: true,
    });
    let {code, set_output, is_automatic} = this.state;
    is_automatic = Number(is_automatic);
    console.log('code:', typeof code);
    console.log('set_output:', typeof set_output);
    console.log('is_automatic:', typeof is_automatic);
    submitSetUp(code, set_output, is_automatic)
      .then(res => {
        console.log(res);
        this.setState({
          loading: false,
        });
      })
      .catch(err => {
        console.log(err);
        this.setState({
          loading: false,
        });
      });
  };

  render() {
    const placeholderSpec = {
      label: '请选择型号编码',
      value: null,
      color: '#9EA0A4',
    };
    const placeholderPriority = {
      label: '请选择优先级',
      value: null,
      color: '#9EA0A4',
    };
    return (
      <View>
        <PublicHead headerText={'参数设置'}/>
        <Card containerStyle={{
          borderColor: 'transparent',
          shadowOffset: {width: 5, height: 8},
          shadowOpacity: 0.5,
          shadowRadius: 20,
        }}>
          <View style={{marginTop: 20}}>
            <Text style={styles.tip}>请选择工作站：</Text>
            <RNPickerSelect
              style={pickerSelectStyles}
              placeholder={placeholderSpec}
              onValueChange={value => this.workstationSelect(value)}
              items={this.state.workstation}
            />
          </View>
          <View style={{marginTop: 20}}>
            <Text style={styles.tip}>设定产量：</Text>
            <TextInput
              keyboardType='numeric'
              style={{height: 40, borderColor: 'gray', borderWidth: 1}}
              onChangeText={text => this.onChangeText(text)}
              value={this.state.set_output}
            />
          </View>
          <View style={{marginTop: 40}}>
            <Text style={styles.tip}>是否自动：</Text>
            <Switch
              onValueChange={newValue => this.setState({is_automatic: newValue})}
              value={this.state.is_automatic}
            />
          </View>
          <View style={{marginTop: 40}}>
            <Button
              loading={this.state.loading}
              icon={
                <FontAwesome
                  name="reorder"
                  size={15}
                  color="white"
                />
              }
              title=" 确定"
              onPress={this.submit}
              buttonStyle={{backgroundColor: '#53CAC4'}}
            />
          </View>
        </Card>
      </View>
    );
  }
}

export default SetUp;
// const mapStateToProps = state => state.alarmOverview;
// export default connect(mapStateToProps, action)(SetUp);
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContainer: {
    flex: 1,
    paddingHorizontal: 15,
  },
  scrollContentContainer: {
    paddingTop: 40,
    paddingBottom: 10,
  },
  tip: {
    color: '#666',
    fontSize: 16,
    fontWeight: 'bold',
  },
});
const pickerSelectStyles = StyleSheet.create({
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'purple',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30,
  },
});
